<!--
 * @Author: anonymous
 * @Date: 2022-01-24 05:15:52
 * @LastEditors: anonymous
 * @LastEditTime: 2022-05-14 21:02:00
 * @Description: 
-->
<template>
  <div class='home_container'>
    <el-container>
      <el-header direction="horizontal">
        <elMenu :el_menu_item="el_menu_item"></elMenu>
      </el-header>
      <el-main>
        <div class="content-container">
          <router-view v-slot="{ Component }">
            <keep-alive exclude="charge_on">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称?from '《组件路径?;
import { clearLoginInfo, getUserInfo } from '@/js/public'
import elMenu from '@/public/el-menu/el-menu.vue'

export default {
  components: {
    elMenu
  },
  data () {
    //这里存放数据
    return {
      el_menu_item: [
        { name: '报修中心', index: '/userHome/user_repairCenter' },
        { name: '报修记录', index: '/userHome/user_repairRecord' },
        { name: '个人中心', index: '/userCenter' },
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.home_container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(120deg, #f6f9fc 0%, #edf2f7 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  .el-header {
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }
  
  .el-main {
    padding: 25px;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 8px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.02);
      border-radius: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.15);
      }
    }
    
    .content-container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      padding: 25px;
      min-height: calc(100vh - 140px);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.8);
      
      &:hover {
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .home_container {
    .el-main {
      padding: 15px;
      
      .content-container {
        padding: 15px;
        border-radius: 10px;
        min-height: calc(100vh - 120px);
      }
    }
  }
}
</style>
